<template>
  <el-collapse v-model="showCollapse">
    <el-collapse-item name="1">
      <template #title>
        <div class="card-title">
          ASM
        </div>
      </template>
      <div>
        <el-row justify="space-around">
          <el-col :span="23">
            <Table_two
                style="margin-top: 10px"
                :column="infomation.column"
                @tableAllData ="infomationData"
                :search-key="'Analysis3Asm'"
                :api-key="form"></Table_two>
          </el-col>
        </el-row>
      </div>
    </el-collapse-item>
    <el-collapse-item name="2">
      <template #title>
        <div class="card-title">
          Cell markers
        </div>
      </template>
      <div>
        <el-tabs type="card">
          <el-tab-pane label="Plot">
            <el-row justify="center">
              <el-col :span="22">
                <div style="display: flex;justify-content: center">
                  <chart2 :plotdata="plotData" :snvGeneCount="snvGeneCount"></chart2>
                </div>

              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="Details">
            <el-row justify="space-around">
              <el-col :span="23">
                <Table_two
                    style="margin-top: 10px"
                    @tableAllData ="markersData"
                    :column="cellType.column"
                    :search-key="'Analysis3CellType'"
                    :api-key="form"></Table_two>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>

      </div>
    </el-collapse-item>
<!--    <el-collapse-item name="3">-->
<!--      <template #title>-->
<!--        <div class="card-title">-->
<!--          Cell markers details-->
<!--        </div>-->
<!--      </template>-->
<!--      <div>-->

<!--      </div>-->
<!--    </el-collapse-item>-->
  </el-collapse>
</template>

<script>
import {useRoute} from "vue-router";
import {reactive, toRefs} from "@vue/reactivity";
import chart2 from "@/components/chart/chart2.vue"
import {onMounted, ref,watch,getCurrentInstance} from "vue";
import {Table_two} from "@/components/table";

export default {
  name: "analysis3",
  components:{Table_two,chart2},
  data(){
    return {
      xData: [],
      yData: [],
      plotData: []
    }
  },
  methods: {
    infomationData(data){
      let that = this
      let gene = []
      let gene2 = []
      data.forEach(item=>{
        gene.push(item.cpgGeneFilt)
        gene.push(item.distalWith3D)
        gene.push(item.proximalWith3D)
        gene.push(item.snv2Gene)
        gene.push(item.snvGeneEqtlFilt)
      })
      gene.map(item => {
        if(!gene2.includes(item)){
          that.xData.push({"name":item,"count":1})
          gene2.push(item)
        }else {
          that.xData[that.xData.findIndex(items => items.name === item)].count += 1
        }
      })
      console.log("xxxxxxxxxxxxxxx=>",that.xData)
    },
    markersData(data){
      let that = this
      let cell = {}
      data.forEach(item=>{
        cell = {
          snv: item.snv,
          snv_gene_number: item.snv_gene_number,
          cell_type: item.cell_type,
          cell_name: item.cell_name,
          cell_genes : item.cell_genes,
          p_value: item.p_value
        }
        that.plotData.push(cell)
      })
      console.log("yyyyyyyyy=>",that.plotData)
    },
  },
  setup(){
    const route = useRoute()
    const formdata = JSON.parse(route.query.form)
    if(formdata.Single_cell.length === 1){
      var singleCell = formdata.Single_cell[0]
    }else{
      var singleCell = 'Literature_curation_and_Single_cell_sequencing_prediction'
    }
    const form = {
      snv: formdata.SNV_input.data.split('\n').join(","),
      tissue: formdata.tissue,
      healthStatus: formdata.health_status.join(","),
      singleCell: singleCell
    }
    console.log(formdata)
    console.log(form)
    const data = reactive({
      showCollapse: ['1','2','3'],
      infomation: {
        column: [
          {name: 'Index SNV',value:'idInDbsnp',href: false},
          {name: 'CpG',value:'cpgPos',href: false},
          // {name: 'Ref cov',value:'referenceCoverage',href: false},
          // {name: 'Ref meth',value:'referenceMeth',href: false},
          // {name: 'Ref β',value:'refBeta',href: false},
          // {name: 'Alt coverage',value:'alternateCoverage',href: false},
          // {name: 'Alt Meth',value:'alternateMeth',href: false},
          // {name: 'Alt β',value:'altBeta',href: false},
          {name: 'p-value',value:'pValue',href: false},
          {name: 'q-value',value:'qValue',href: false},
          {name: 'tissue',value:'tissue',href: false},
          {name: 'Cancer type',value:'healthStatus',href: false},
          {name: 'Sample',value:'sample',href: false},
          {name: 'Adjacent gene',value:'adjacent',href: false},
          {name: '3D proximal',value:'proximalWith3D',href: false},
          {name: '3D distal',value:'distalWith3D',href: false},
          {name: 'CpG target',value:'cpgGeneFilt',href: false},
          {name: 'eQTL',value:'snvGeneEqtlFilt',href: false},
        ],
      },
      genes: {
        column: [
          {name: 'Index SNV',value:'idInDbsnp',href: false},
          {name: 'CpG',value:'cpgGeneFilt.cpg',href: false},
          {name: 'Proximal gene',value:'snv2Gene.gene',href: false},
          {name: 'Distal Regulation',value:'distalWith3D.gene',href: false},
          {name: 'Proximal Regulation',value:'proximalWith3D.gene',href: false},
          {name: 'CpG target gene',value:'cpgGeneFilt.gene',href: false},
          {name: 'eQTL gene',value:'snvGeneEqtlFilt.gene',href: false},
        ]
      },
      cellType: {
        column: [
          {name: 'SNV',value:'snv',href: false},
          {name: 'Cell name',value:'cell_name',href: false},
          {name: 'Cell type',value:'cell_type',href: false},
          {name: 'Cell genes',value:'cell_genes',href: false},
          {name: 'P-value',value:'p_value',href: false}
        ]
      },
    })
    // setTimeout(()=>{
    //   console.log('analysis3===>setTimeout',data.infomation.data)
    // },10000)
    return {
      ...toRefs(data),
      form
    }
  }
}
</script>

<style scoped>
::v-deep .el-collapse-item__header{
  height: 56px;
  background-color: #2185d0;
  color: white;
  border-radius: 2px;
  border-bottom: 0;
}
::v-deep .el-collapse-item{
  border-radius: 5px;
  margin-top: 20px;
  border: solid 2px #2185d0;
}
.card-title{
  padding: 10px;
  font-weight: bold;
  font-size: 20px;
}
.card{
  margin-bottom: 10px;
}
.card-body{
  margin-top: 20px
}
</style>
